@await Html.PartialAsync("_RequiresAuth")

@{ 
    var Continue = "/validation/client-razor/contacts/";
    var id = int.Parse(ViewBag.id);
    Exception error = null;
    Contact contact = null;
    try {
        contact = (await Gateway.SendAsync(new GetContact { Id = id })).Result;
    } catch (Exception ex) {
        error = ex; 
    }
}

@if (contact != null)
{
    <h3>Update Contact</h3>
    
    <form action="/contacts/@id" method="post" class="col-lg-4">
        <div class="form-group" data-validation-summary="title,name,color,filmGenres,age"></div>
    
        <div class="form-group">
            <div class="form-check">
            @foreach (var it in Html.ContactTitles())
            {
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="title-@it.Key" name="title" value="@it.Key" class="custom-control-input">
                    <label class="custom-control-label" for="title-@it.Key">@it.Value</label>
                </div>
            }
            </div>
        </div>
        <div class="form-group">
            <label for="name">Full Name</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Name">
            <small id="name-help" class="text-muted">Your first and last name</small>
        </div>
        <div class="form-group">
            <label class="form-label" for="color">Favorite color</label>
            <select id="color" name="color" class="col-4 form-control">
                <option value=""></option>
            @foreach (var it in Html.ContactColors())
            {
                <option value="@it.Key">@it.Value</option>
            }
            </select>
        </div>
        <div class="form-group">
            <label class="form-check-label">Favorite Film Genres</label>
            <div class="form-check">
            @foreach (var it in Html.ContactGenres())
            {
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" id="filmGenres-@it" name="filmGenres" value="@it" class="form-check-input">
                    <label class="form-check-label" for="filmGenres-@it">@it</label>
                </div>
            }
            </div>
        </div>
        <div class="form-group">
            <input class="form-control col-3" name="age" type="number" min="3" placeholder="Age">
        </div>
        <div class="form-group">
            <button class="btn btn-primary" type="submit">Update Contact</button>
            <a href="@Continue">cancel</a>
        </div>
    </form>
    
    @section scripts
    {
        <script>
            $("form").bootstrapForm({
                model: @contact.AsRawJson(),
                success: function (r) {
                    location.href = '@Continue';
                }
            });
        </script>
    }

}
else 
{
    <div class="col-6">
        <div class="alert alert-warning">@(error?.Message ?? "Contact does not exist")</div>
        <p><a href="@Continue">&lt; back</a></p>
    </div>
}
